<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		 /*伪类选择器:  
		       格式--标签: hover{css} */
		 div{
		 	width: 200px;
		 	height: 200px;
		 	background-color: green;
		 }
		 div:hover{
		 	background-color: pink;
		 }
		 /*鼠标悬停在p标签上时，p会发生那些改变*/
		 p:hover{text-decoration: underline;
		 	color: blue;}
/* 鼠标悬停在dd上时，dd里面的span发生样式改变 注：两者必须是父子关系 */
		 	.dd:hover span{
		 		color: red;
		 		font-size: 30px;
		 	}
		 	ul li:hover a{
		 		text-decoration: none;
		 		color: orange;
		 	}
		 	/*伪元素选择器: 
		 	     在h1内部的最前面添加一个伪元素
		 	     要添加的伪元素不存在于dom树上(html里)，是新建的的虚拟元素，是h1的子元素,逻辑上存在，实际上不存在
		 	     因为他不存在于dom树，所以不能通过js操作,仅仅只是css引入的*/
            h1::before{
            	/*必须结合content使用*/
            	/* 宽高加不上 行内元素 */
            	content: "jjzz";
            	width: 200px;
            	height: 200px;
            	background: green;
            	/*如果想要宽高生效，需转换成块状元素*/
            	display: block;
            }
            h1::after{
            	content: "gldj";
            }
	</style>
</head>
<body>
    <div></div>
    <p>我好饿饿谔谔鹅鹅鹅</p>
    <div class="dd"><span>呜呜呜呜哈哈哈哈</span></div>
    <ul>
    	<li><a href="
    		">百度一下</a></li>
    </ul>
    <h1>伪元素</h1>
</body>
</html>